<template>
  <view class="content">
    <!-- 提现申请 -->
    <view class="money flex-y flex-x-center flex-y-center">
      <view class="fz80 bold">{{ (state.money / 100).toFixed(2) }}</view>
      <view class="mt30 fz36 gray6">账户余额 (元)</view>
    </view>

    <view class="btn-box"
      ><button
        class="btn main-theme-bgcolor fff"
        form-type="submit"
        :disabled="state.money < 1 || state.isSend"
        @click="onUserWithdrawal"
      >
        提现到微信钱包
      </button></view
    >

    <view class="tips mt40 t-c fz24 gray9">
      <view class="fz36 gray3">提现说明</view>
      <view class="mt30">订单结束后可随时提现</view>
      <view class="mt10"
        >申请提现成功后，余额约0-5个工作日返回您的微信钱包</view
      >
    </view>

    <filings-modal></filings-modal>
  </view>
</template>

<script setup>
import filingsModal from "@/components/filings/index.vue";
import { ref, reactive, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { queryUserById, userWithdrawal } from "@/common/js/getData.js";

const { proxy } = getCurrentInstance();

const state = reactive({
  isSend: false,
  money: 0,
});

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  loadData();
});

// 获取数据
const loadData = (page) => {
  queryUserById().then((res) => {
    state.money = res.result.amount;
  });
};

// 提现
const onUserWithdrawal = () => {
  const data = { amount: state.money };
  state.isSend = true;
  userWithdrawal(data)
    .then((res) => {
      uni.showToast({
        icon: "success",
        title: "提现成功",
      });
      setTimeout(() => {
        loadData();
      }, 1000);
    })
    .finally(() => {
      setTimeout(() => {
        state.isSend = false;
      }, 1000);
    });
};
</script>

<style lang="less" scoped>
.money {
  height: 60vh;
}

.btn-box {
  padding: 0 40rpx;
}
</style>
